<template>
  <div>
    <head-top head-title="月份列表" go-back='true'></head-top>
    <span class="demonstration"></span>
    <el-date-picker  v-model="value" type="month"   style='width: 80%;' placeholder="选择月" value-format="yyyy-MM"    @change="dateSechChange"></el-date-picker>    
    <group>       
      <cell :title="i"   v-for="i in day" :key="i"  :link="{ path: '/net/netKeyKpi',query: { date: i }}"></cell>         
    </group>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
  import headTop from "src/components/head";
  import { Cell } from 'vux';
  import { Group } from 'vux';  
  import vue from "vue";
   import {  InlineCalendar, dateFormat } from 'vux'
  export default{
    components:{
      headTop,Cell,Group,InlineCalendar
    },
    data() {
      return {
      value:'',
      day: []
    };
    },
    created(){    
     var date=new  Date();  
     var strDate = date.getDate();//获取当前日期的“日”   
    //var strDate=26;  
     for (var v=0;v<6;v++){  
      if (strDate>= 27) { //如当前日期为6月27日，则列出7，6，5，4，3，2几个月的时间列表 
        var dayv= new Date(date.setMonth((new Date().getMonth() + 1-v)));
      }else{//如当前日期为6月26日，则列出6，5，4，3，2，1几个月的时间列表 
        var dayv= new Date(date.setMonth((new Date().getMonth()-v)));
      }    
      var days=this.formatDate(dayv);//将时间转换为2018-06这种时间格式    
      this.day.push(days);//列出月份列表
    }
    },
    methods: {  
     dateSechChange(val) {
     // this.listQuery.date = val;
      console.log("val",val);
      this.$router.push({ path: "netKeyKpi", query: {date:val}});  
    }, 
     formatDate(date){
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }    
        var currentdate = year + seperator1 + month;
        return currentdate;
      }

  }
};
</script>
